/**
* @Description: 销售区域管理-变更记录
* @author  qgj
* @date 2023/6/25
*/
<template>
  <el-dialog title="变更记录" :visible.sync="visible" width="1208px" top="5vh" append-to-body :close-on-click-modal="false">
    <el-row>
      <div style="height: 400px; overflow: auto;">
        <el-table ref="table" :data="dataList" :row-style="({row, rowIndex}) => {return {height: 48+'px'};}">
          <el-table-column type="index" width="60" label="序号"></el-table-column>
          <el-table-column label="包含行政区划" align="left" prop="areaName" width="357">
            <template slot-scope="scope">
                <el-tooltip placement="top">
                <div slot="content" style="min-width: 160px; max-height:236px; overflow: auto;">
                    <ul style="list-style-type: none; padding-left:0;">
                    <li style="height: 22px; line-height: 22px; font-size: 14px; font-weight: 400;" v-for="item in scope.row.areaName" :key="item.id">{{ item }}</li>
                    </ul>
                </div>
                <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ scope.row.areaName ? scope.row.areaName.slice(0, 5) + '' : '' }}</span>
                </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="生效时间" prop="validTime" min-width="200" show-overflow-tooltip/>
          <el-table-column label="失效时间" align="left" prop="invalidTime" min-width="200" show-overflow-tooltip></el-table-column>
          <el-table-column label="修改人" align="left" prop="updateName" min-width="140" show-overflow-tooltip></el-table-column>
          <el-table-column label="修改时间" align="left" prop="updateTime" min-width="200" show-overflow-tooltip></el-table-column>
        </el-table>
      </div>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>

import {salesRegionListHistory} from '@/api/basic/salesArea.js'

export default {
  props: {},
  data() {
    return {
      // 遮罩层
      visible: false,
      tableRadio: undefined, // 单选
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        id:''
      },
      total: 0,
      dataList: [],
      id:""
    }
  },
  mounted() {},
  methods: {

    /**
     * 显示弹窗
     */
    show(row) {
      this.visible = true;
      this.id = row.id
      this.getList();
    },

    /**
     * 得到数据
     */
    getList() {
      this.getRepairGoodsOutList();
    },

    /**
     * 分页查询销售出库单(选择领料出库单)
     */
     getRepairGoodsOutList() {
      this.queryParams.id = this.id
      salesRegionListHistory(this.queryParams).then(res => {
        console.log('res=', res);
        if (res.code == 200) {
          this.dataList = res.data.records;
          this.total = Number(res.data.total ? res.data.total : 0);
          console.log('total=', this.total);
        }
      }).catch(err => {

      });
    },
    /** 关闭 */
    cancel(){
      this.visible = false;
    },
  },
}
</script>